import MonacoEditor from '@monaco-editor/react';
import './index.scss'

interface IProps {
    code: string,
    language: string,
    onCodeChange: (code: string) => void
}

const CodeEdit = (props: IProps) => {
    const { code, language, onCodeChange } = props;

    const handleEditorChange = (value: string | undefined) => {
        if (value !== undefined) {
            onCodeChange(value)
        }
    };

    return (
        <div className='code-edit-container' style={{ border: '1px solid #ccc' }}>
            <MonacoEditor
                language={language} // 语言类型
                value={code} // 代码内容
                onChange={handleEditorChange} // 编辑器内容变化时的回调
                theme="vs-dark" // 主题
                options={{
                    selectOnLineNumbers: true, // 行号点击选中
                    minimap: { enabled: true }, // 关闭迷你地图
                }}
            />
        </div>
    );
}

export default CodeEdit;